<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>线性渐变</title>

        <style>
            /* 盒子的background-image属性可以用linear-gradient（）形式创建线性渐变背景
               background-image：linear-gradient（to right，blue，red）；
                                 线性的   渐变      渐变方向 开始  结束
                                                           颜色   颜色
               渐变方向也可以写成 度数（deg）
               background-image：linear-gradient（45deg，blue，red）；
               可以有多个颜色值，并且可以用百分数定义他们出现的位置
               linear-gradient（to bottom, blue, yellow 20%, red);
            */

            .box1 {
                width: 200px;
                height: 200px;
                border: 1px solid #000;
                margin-bottom: 10px;
                background-image:linear-gradient(to right, red, blue);
            }
            .box2 {
                width: 200px;
                height: 200px;
                border: 1px solid #000;
                margin-bottom: 10px;
                background-image:linear-gradient(45deg , red, blue);
            }
            .box3 {
                width: 200px;
                height: 200px;
                border: 1px solid #000;
                margin-bottom: 10px;
                background-image:linear-gradient(to right, red, yellow, orange, green, blue, purple);
            }
            
            /* 百分数表示该颜色出现的位置 */
            .box4 {
                width: 200px;
                height: 200px;
                border: 1px solid #000;
                margin-bottom: 10px;
                background-image:linear-gradient(to right, red, yellow 20%, blue);
            }
            .box5 {
                width: 200px;
                height: 200px;
                border: 1px solid #000;
                margin-bottom: 10px;
                background-image:linear-gradient(to right, red, yellow 80%, blue);
            }
        </style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
        <div class="box5"></div>
    </body>
</html>